<template>
  <div id="configWrapper">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">构建负载</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>

    <el-row>      
        <el-col :xs="24" :sm="24" :lg="24">
            <datepickersummary></datepickersummary>
        </el-col>  
    </el-row>

    <el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>节点负载</span>
			</div>
			<div>
				<el-row>
					<el-form :inline="true">
						<el-col :span="8">
							<el-form-item label="Jenkins IP" label-width="100px">
								<el-select v-model="selectedIP" placeholder="请选择Jenkins IP" clearable>
									<el-option v-for="(ip, index) in table_load.ips" :key="index" :label="ip" :value="ip"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="构建类型" label-width="100px">
								<el-select v-model="selectedBuild" placeholder="请选择构建类型" clearable>
									<el-option
										v-for="(build, index) in table_load.build_list"
										:key="index"
										:label="build"
										:value="build"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="Job名" label-width="100px">
								<el-select v-model="selectedJob" placeholder="请选择Job名" clearable>
									<el-option
										v-for="(job, index) in table_load.job_list"
										:key="index"
										:label="job"
										:value="job"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<el-table
					:data="table_load.details"
					style="width: 100%; margin-bottom: 20px"
					show-summary
					:summary-method="getSummaries"
				>
					<el-table-column type="expand">
						<template slot-scope="scope">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="Daily-build次数">
									<span>{{ scope.row.daily_build_num }}个</span>
								</el-form-item>
								<el-form-item label="Verify-build次数">
									<span>{{ scope.row.verify_build_num }}个</span>
								</el-form-item>
								<el-form-item label="代码下载平均时长">
									<span>{{ formatSeconds(scope.row.avg_sync_time) }}</span>
								</el-form-item>
								<el-form-item label="AMSS平均时长">
									<span>{{ formatSeconds(scope.row.avg_amss_time) }}</span>
								</el-form-item>
								<el-form-item label="Android平均时长">
									<span>{{ formatSeconds(scope.row.avg_android_time) }}</span>
								</el-form-item>
								<el-form-item label="QNX平均时长">
									<span>{{ formatSeconds(scope.row.avg_qnx_time) }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column prop="nodeIP" label="节点 IP"></el-table-column>
					<el-table-column prop="build_num" label="构建数" sortable></el-table-column>
					<el-table-column prop="build_rate" label="构建占用率" sortable></el-table-column>
					<el-table-column prop="av_build_time" label="平均构建时间" sortable></el-table-column>
					<el-table-column prop="jenkinsIP" label="Jenkins IP"></el-table-column>
				</el-table>
				<el-pagination
					style="text-align: center"
					background
					layout="prev, pager, next"
					@current-change="handleCurrentChange"
					:total="buildCount"
					:page-count="table_load.num_pages"
				></el-pagination>
			</div>
		</el-card>
  </div>
</template>

<script>
import DatePickerSummary from '@/views/summary/DatePickerSummary'
import { getHeader } from '@/app.config'
import { mapState } from "vuex"

export default {
  name: 'configManage',
  data() {
    return {
      selectedIP: '',
			selectedBuild: '',
      table_load: {},
      buildCount: 0,
      selectedJob: '',
      currentPage: 1,
    }
  },
  components: {
    datepickersummary: DatePickerSummary
  },
  computed: {
    ...mapState({
      filters: state => state.filters
    })
  },
  watch: {
    filters: {
        handler: function() {
            this.init()
        },
        deep: true,
    },
    selectedIP(val) {			
			this.init()
		},
		selectedBuild(val) {
			// const dates = this.params.time === 'undefined' ? '' : this.params.time
			this.init()
		},
		selectedJob(val) {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.get_load_data(this.filters.time)
    },
    getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 1) {
					sums[index] = '总构建次数';
					return;
				} else if (index === 3) {
					sums[index] = '总平均构建时间';
					return;
				} else if (index === 0 || index === 5) {
					return;
				} else if (index === 2) {
					const values = data.map(item =>
						Number(item[column.property].split('个')[0])
					);
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += '个';
					} else {
						sums[index] = '';
					}
				} else {
					const values = data.map(item =>
						Number(item[column.property].split('秒')[0])
					);
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] = this.formatSeconds(
							parseInt(sums[index] / values.length)
						);
					} else {
						sums[index] = '';
					}
				}
			});
			return sums;
    },
    formatSeconds(value) {
			if (isNaN(value)) {
				value = 0;
			}
			var theTime = parseInt(value); // 秒
			var theTime1 = 0; // 分
			var theTime2 = 0; // 小时
			var theTime3 = 0; // 天
			if (theTime > 60) {
				theTime1 = parseInt(theTime / 60);
				theTime = parseInt(theTime % 60);
				if (theTime1 > 60) {
					theTime2 = parseInt(theTime1 / 60);
					theTime1 = parseInt(theTime1 % 60);
					if (theTime2 > 24) {
						theTime3 = parseInt(theTime2 / 24);
						theTime2 = parseInt(theTime2 % 24);
					}
				}
			}
			var result = '' + parseInt(theTime) + '秒';
			if (theTime1 > 0) {
				result = '' + parseInt(theTime1) + '分' + result;
			}
			if (theTime2 > 0) {
				result = '' + parseInt(theTime2) + '时' + result;
			}
			if (theTime3 > 0) {
				result = '' + parseInt(theTime3) + '天' + result;
			}
			return result;
    },
    handleCurrentChange(val) {
			this.currentPage = val
			// const dates = this.params.time === 'undefined' ? '' : this.params.time
			this.get_load_data(this.filters.time)
    },
    get_load_data(date) {
      this.table_load = {}
			var url =
				process.env.VUE_APP_KANBAN_HOST +
				'/api/devops/load?project=' +
				this.filters.projectName +
				'&ip=' +
				this.selectedIP +
				'&build_type=' +
				this.selectedBuild +
				'&job=' +
				this.selectedJob +
				'&date=' +
				date +
				'&page=' +
				this.currentPage;
			var _self = this;
			this.$axios.get(url, {headers: getHeader()}).then(function(response) {
				if (response.status === 200) {
					if (response.data.code === 200) {
						_self.table_load = response.data;
						_self.buildCount = _self.table_load.count;
						for (var i = 0; i < _self.table_load.details.length; i++) {
							_self.pageValue = false;
							_self.table_load.details[i]['build_num'] += ' 个';
							_self.table_load.details[i]['build_rate'] += ' %';
							if (_self.table_load.details[i]['av_build_time'] > 60) {
								_self.table_load.details[i]['av_build_time'] =
									_self.table_load.details[i]['av_build_time'] +
									'秒' +
									'(' +
									_self.formatSeconds(
										_self.table_load.details[i]['av_build_time']
									) +
									')';
							} else {
								_self.table_load.details[i]['av_build_time'] =
									_self.table_load.details[i]['av_build_time'] + '秒';
							}
						}
					} else {
						_self.table_load = {};
						_self.buildCount = 0;
					}
				}
			});
		}
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/common/common.scss';

    #configWrapper{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .bgColor{
        background: #fff;
    }
    .pad{
        padding: 0 20px;
        padding-top: 20px;
    }
    .marT{
        margin-top: 20px;
    }
</style>